<template>
	<view>
		<statusBar></statusBar>
		<!-- <view>hello world</view> -->
		<!-- 搜索功能 -->
		<view class="uni-search-box">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
				:placeholder="inputPlaceholder" />
			<view class="cover-search-bar" @click="handlerForUserClickSearchBox"></view>
		</view>
		<!-- 轮播图 -->
		<unicloud-db ref="bannerdb" v-slot:default="{ data, loading, error, options }" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload" orderby="sort" where="status == true">
			<!-- 注：“orderby”属性用于指定查询时的排序规则，此处设置为按照“sort”字段升序排列。“where”属性用于指定查询条件，此处设置为“status == true”，即只选择“状态为true的记录” -->
			<!-- 当无banner数据时显示占位图 -->
			<image v-if="!(loading || data.length)" class="banner-image" src="/static/uni-center/headers.png"
				mode="aspectFill" :draggable="false" />
			<!-- autoplay是布尔属性，设置为true时表示“自动切换”↓ -->
			<swiper v-else class="swiper-box" @change="changeSwiper" :current="current" indicator-dots autoplay>
				<swiper-item v-for="(item, index) in data" :key="item._id">
					<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill"
						@click="handlerForUserClickBannerItem(item)" :draggable="false" />
				</swiper-item>
			</swiper>
		</unicloud-db>
		<!-- 菜单分类 -->
		<unicloud-db v-slot:default="{ data, loading, error, options }" collection="opendb-mall-categories"
			field="_id,name,sort" @load="onqueryload" orderby="sort" where="is_index_show == true">
			<!-- 注：“is_index_show”字段用于标识“是否在首页显示”，此处设置为只选择那些“is_index_show为true的记录”；“data”是“经过筛选后得到的数据”↑ -->
			<!-- 注：此处不知何故，只能用“v-show”而不能用“v-if”来控制菜单分类的显示，否则控制台中会报错说“Uncaught (in promise) TypeError: Cannot read properties of null (reading 'scrollWidth')”↓ -->
			<!-- <view v-if="!loading" class="nav-bar"> -->
			<!-- 注：使用“v-show”虽然能解决上述报错问题，但是微信小程序不支持使用该指令，使用该指令后在微信小程序上仍然不显示分类导航栏，因此此处暂时注释掉下面的这行代码，仍需另想它法↓ -->
			<!-- <view v-show="!loading" class="nav-bar"> -->
			<view class="nav-bar">
				<scroll-view scroll-x="true" class="aClassForACompentThatBeNamedScrollView" :scroll-into-view="intoView"
					scroll-with-animation>
					<!-- 为了解决上述问题，在下面的两个“view”标签中都使用了“v-if="!loading"”↓ -->
					<view v-if="!loading" id="view0" @click="handlerForUserClickNavbar(0)"
						:class="{ 'scroll-view-item': true, 'scroll-view-active': intoView === 'view0' }">全部</view>
					<!-- <view v-for="(item,index) in data" :key="item._id" :id="`view${index+1}`" @click="handlerForUserClickNavbar" :class="{'scroll-view-item':true,'scroll-view-active':intoView === `view${index+1}`}">{{ item.name }}</view> -->
					<view v-for="(item, index) in data" :key="item._id" :id="`view${index + 1}`"
						@click="handlerForUserClickNavbar(index + 1,item._id)"
						:class="{ 'scroll-view-item': true, 'scroll-view-active': intoView === `view${index + 1}` }">{{
							item.name }}</view>
				</scroll-view>
				<view v-if="!loading" class="navigateToMoreCategory">
					<!-- 注：由于分类页面是“navbar”中的一页，所以此处需要使用“open-type”属性来实现“跳转到分类页面”的功能（“open-type”属性被用于指定“页面的打开方式”，此处设置为“reLaunch”，即“关闭所有页面，打开到应用内的某个页面”）。可选值有“navigate”、“redirect”、“switchTab”、“navigateBack”、“exit”和“reLaunch”↓ -->
					<navigator url="/pages/category/category" open-type="reLaunch">
						<view class="iconfont icon-liebiao"></view>
					</navigator>
				</view>
			</view>
		</unicloud-db>
		<!-- 菜品列表（注：此处的判断条件“status == 1”用于筛选出那些“状态为1的记录”，即只显示那些已经被管理员审核通过并被发布的菜品）↓ -->
		<!-- <unicloud-db ref='udb' v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="colList" :page-size="6" where="status == 1"> -->
		<unicloud-db ref='udb' v-slot:default="{ data, pagination, hasMore, loading, error, options }" :collection="colList" :page-size="6" :where="queryCondition">
			<view class="waterfall-wrapper">
				<!-- 注：名为“custom-waterfalls-flow”的组件是一个自定义的瀑布流组件，它被用于展示菜品列表↓ -->
				<!-- 注：“wapperClick”（此处的‘wapper’实际上应该是‘wrapper’（即‘包装器、容器’））是当用户点击菜品列表中的某个项目（即“容器”）时触发的事件。此处暂时用不到，只需使用“imageClick”事件即可。“loaded”是图片被加载成功时发生的事件↓ -->
				<!-- <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded"></custom-waterfalls-flow> -->
				<!-- <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="column" :columnSpace="1.5" -->
				 <!-- 注：“listStyle”属性用于设置“自定义瀑布流组件的样式”，此处设置为给每个项目添加阴影和背景颜色↓ -->
				<custom-waterfalls-flow ref="waterfallsFlowRef" :listStyle="{ 'box-shadow': '1px 1px 1px rgba(0,0,0,0.1)', 'background-color' : '#F7F7F7' }"
					:value="handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(data)"
					:column="column" :columnSpace="1.5" :seat="2" @imageClick="handlerForUserClickImageInTheWaterFall">
					<!-- #ifdef MP-WEIXIN -->
					<!-- <view class="item" v-for="(item, index) in data.list" :key="index" slot="slot{{index}}"> -->
					<view class="item"
						v-for="(item, index) in handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(data)"
						:key="index" slot="slot{{index}}">
						<view class="waterfall-title">{{ item.title }}</view>
						<!-- <view class="desc">{{ item.desc }}</view> -->
						<view class="user-wrapper">
							<img class="avatarOfUser" :src="item.avatarurl"/>
							<view>{{ item.nickname }}</view>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<template v-slot:default="item">
						<view class="item">
							<view class="waterfall-title">{{ item.title }}</view>
							<!-- <view class="desc">{{ item.desc }}</view> -->
							<view class="user-wrapper">
							<img class="avatarOfUser" :src="item.avatarurl"/>
							<view>{{ item.nickname }}</view>
						</view>
						</view>
					</template>
					<!-- #endif -->
				</custom-waterfalls-flow>
				<uni-load-state class="load-state" @networkResume="refresh"
					:state="{ data, pagination, hasMore, loading, error }" @loadMore="loadMore">
				</uni-load-state>
			</view>
		</unicloud-db>
	</view>
</template>

<script>
import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
// import { ref } from "vue";
let cdbRef // 定义一个变量用于存储“unicloud-db”组件的引用（注：此处先声明该变量，在后续代码中的“onReady”生命周期钩子函数中对其进行赋值）
let db = uniCloud.databaseForJQL() // 获取数据库引用
export default {
	data() {
		return {
			inputPlaceholder: "请输入搜索内容", // 搜索框的占位符文本
			keyword: "", // 搜索关键字
			current: 0, // 当前轮播图的索引（即用户正在查看的banner图片是哪一张）
			intoView: 'view0', // 用于控制滚动视图（scroll-view）的滚动位置的变量
			loading: false, // 加载状态
			column: 2, // 瀑布流组件的列数
			queryCondition:"status == 1", // 查询条件
		}
	},
	/* created() {
		this.loadWaterfallData() // 加载瀑布流数据
	},
	// 添加下拉刷新处理
	onPullDownRefresh() {
		this.loadWaterfallData().finally(() => {
			uni.stopPullDownRefresh();
		});
	}, */
	computed: {
		colList() { // “colList”计算属性被用于动态生成“unicloud-db”组件需要查询的数据库集合列表。此处的“col”代表“collection”，即“数据库集合”
			// let result = db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp()
			// console.log(result); // Proxy(ss) {content: {…}, prevStage: ss, udb: null, _database: cs, then: 'DoNotReturnProxyWithAFunctionNamedThen', …}			
			return [db.collection('food-list').field('_id,title,category_id,avatarfile,status,user_id').getTemp(),
			db.collection('uni-id-users').field('_id,nickname,avatar_file').getTemp(),
			// result,
			// db.collection('uni-id-users').field('_id,nickname,avatar_file{url}').getTemp(), // 注：编程智能体“Zulu”说“JQL选择字段时默认不返回file类型的完整结构，必须显式指定子字段：avatar_file{url}”，但是后面经过我亲测，使用临时表联表查询时临时表field方法内不可使用花括号写法（使用这种写法时页面和控制台中都会报错），因此只能将这行代码注释掉
			// db.collection('uni-id-users').field('_id,nickname,avatar_file as avatarfile').getTemp(), // 为了解决报错问题，此处使用了别名，将“avatar_file”字段强制重命名为“avatarfile”，这样就可以避免在后续代码中出现因为拼写错误而导致的问题
			// db.collection('uni-id-users').field('_id,nickname,avatarfile').getTemp(), // 注意拼写：数据库中使用的字段名是“avatar_file”而不是“avatarfile”
			db.collection('opendb-mall-categories').field('_id,parent_id,name').getTemp(),
			]
		}
	},
	components: {
		statusBar,
	},
	onLoad(options) {
		this.keyword = options.keyword || '' // 初始化搜索关键字为从上个页面传递过来的值，如果没有传递过来则默认为空字符串
		// console.log("options:", options); // 控制台中输出“{ keyword: 'hello' }”
		console
	},
	onReady() {
		cdbRef = this.$refs.udb
	},
	onPullDownRefresh() {
		this.refresh()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		/**
		 * 函数“handlerForUserClickSearchBox”被用于“处理用户点击搜索框时发生的事件”
		 */
		handlerForUserClickSearchBox(event) {
			uni.hideKeyboard(); // 隐藏键盘
			uni.navigateTo({ // 跳转到搜索页面
				url: '/pages/list/search/search',
				animationType: 'fade-in' // 设置动画效果的类型为“淡入”（注：这个动画效果只在APP端中有效）
			});
		},
		/**
		 * banner加载后触发的回调
		 */
		onqueryload(data) {
		},
		/**
		 * 函数“handlerForUserClickBannerItem”被用于处理“用户点击轮播图中的某一张图片”时发生的事件
		 * @param item 用户点击的banner项（即与“被用户点击的某一张图片”对应的数据对象）
		 */
		handlerForUserClickBannerItem(item) {
			if (item.open_url) { // 如果进入了这个代码块，那么说明该图片的“open_url”字段不为空，即存在一个要跳转到的页面链接↓
				uni.navigateTo({ // 这时使用uni.navigateTo方法跳转到“item.open_url”字段指定的页面链接即可
					url: `/uni_modules/uni-id-pages/pages/common/webview/webview?url=${item.open_url}&title=${item.title}`, // 此处使用了模板字符串语法，将“item.open_url”和“item.title”的值嵌入到了URL中，并且使用了“webview”组件来加载该页面
					success: () => { },
					fail: () => { },
					complete: () => { }
				});
			}
		},
		/**
		 * 点击banner图片时触发的回调
		 * @param event 轮播图切换事件对象，其中包含了当前激活的轮播图子项（也就是每一张图片）的索引等信息。
		 */
		changeSwiper(event) {
			this.current = event.detail.current
		},
		/**
		 * 函数“handlerForUserClickNavbar”被用于处理“用户点击导航栏”时发生的事件
		 * @param index 用户点击的导航栏项的索引值（它表示用户点击的是哪一个导航栏项）
		 * @param idOfAnItemThatInTheNavbar 用户点击的导航栏项对应的分类ID（如果用户点击的是“全部”分类，那么这个参数将为空）
		 */
		handlerForUserClickNavbar(index,idOfAnItemThatInTheNavbar) {
			// console.log(index); // 在调用该函数时没有传递“index+1”的情况下，控制台中输出“{type: 'click', timeStamp: 2655, target: {…}, detail: {…}, currentTarget: {…}, …}”，看起来是把事件对象传递过来了				
			console.log(index) // 控制台中输出的是用户点击的导航栏项的索引值（即数字）				
			this.intoView = `view${index}`;
			if (idOfAnItemThatInTheNavbar) {
				console.log(`用户点击的是某一个具体的分类，其_id为：${idOfAnItemThatInTheNavbar}`);				
				// 注：如果进入了这个代码块，那么说明用户点击的是某一个具体的分类，因此需要将“queryCondition”变量更新为对应的查询条件
				this.queryCondition = `status == 1 && category_id.parent_id == "${idOfAnItemThatInTheNavbar}"`
			} else {
				this.queryCondition = "status == 1" // 注：如果进入了这个代码块，那么说明用户点击的是“全部”分类，因此需要将“queryCondition”变量更新为默认的查询条件					
			}
			this.$refs.waterfallsFlowRef.refresh() // 刷新瀑布流组件，使其重新加载数据
		},
		refresh() {
			console.log(`当前ref的状态：${{udb: cdbRef,waterfall: this.$refs.waterfallsFlowRef}}`); // 当前ref的状态：[object Object]			
			cdbRef.loadData({
				clear: true
			}, () => {
				console.log(this.$refs.waterfallsFlowRef);	// 输出两次：第一次输出“null”，第二次输出“Proxy(Object) {…}”					
				console.log(this.$refs.waterfallsFlowRef.refresh);	// refresh(){ // 此处是“refresh”方法的完整代码}					
				this.$refs.waterfallsFlowRef.refresh() // 此处调用了瀑布流组件的“refresh”方法，该方法用于刷新瀑布流数据				
				/* this.$nextTick(() => { // 注：由于前面在瀑布流组件的标签上使用了“v-if="!loading"”来确保数据被加载完成后才能渲染该组件，因此此处使用了“this.$nextTick”方法来确保在DOM更新完成后才调用瀑布流组件的refresh方法。这是因为如果数据还没有加载完成就尝试刷新瀑布流（就像上面被注释的这一行代码那样做），那么就会导致报错（错误信息：“TypeError: Cannot read properties of null (reading 'refresh')”，报错原因：此时的数据还不完整）					
					console.log(`代码被执行到nextTick中的回调函数时，refs的状态：${{udb: cdbRef,waterfall: this.$refs.waterfallsFlowRef}}`); // 代码被执行到nextTick中的回调函数时，refs的状态：[object Object]										
					this.$refs.waterfallsFlowRef.refresh()
				}) */
				uni.stopPullDownRefresh()
				console.log('end');
			})
			console.log('refresh');
		},
		loadMore() {
			cdbRef.loadMore()
		},
		/**
		 * 函数“handlerForUserClickImageInTheWaterFall”被用于处理用户点击瀑布流组件中的图片时发生的事件
		 * @param anItemThatInTheWaterFall 被用户点击的图片对应的数据对象（即瀑布流组件中的一个子项）
		 */
		handlerForUserClickImageInTheWaterFall(anItemThatInTheWaterFall) {
			console.log(anItemThatInTheWaterFall); // 控制台中输出“Proxy(Object) {image: 'https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cdn.bspapp.com/20250825/豆豉蒸排骨.jpg', title: '豆豉蒸排骨', nickname: 'abcd88732771', avatarurl: 'https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cd…loudstorage/3c3e0d44-ac8b-4ff5-9b2d-0d35d8001437.', _id: '67ce861309664cc2d40a4781', …}”
			// 从控制台中输出的内容中可以看到这个对象包含了“title”、“_id”这两个属性。这两个属性都需要被作为参数传递到详情页面（因为详情页面需要根据“_id”属性来查询并渲染对应的菜品详情数据，根据“title”属性来显示页面标题）
			uni.navigateTo({
				url: `/pages/detail/detail?title=${anItemThatInTheWaterFall.title}&_id=${anItemThatInTheWaterFall._id}`, // 此处使用了模板字符串语法，将“anItemThatInTheWaterFall.title”和“anItemThatInTheWaterFall._id”的值嵌入到了URL中
				success: () => { },
				fail: () => { },
				complete: () => { }
			});
		},
		/**
		 * 函数“handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow”被用于处理数据列表的格式，使其符合名为“custom-waterfalls-flow”的组件（即“瀑布流组件”）所需的正确格式↓
		 * @param data 数据列表，即瀑布流组件所需要的数据对象数组
		 */
		// 注：这是我根据视频教程写的原始代码，但是不知何故，这段代码在运行时浏览器会报错：“Cannot read properties of undefined (reading 'url')”↓
		handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(data) {
			/* return data.map((item) => {{
				image: item.avatarfile.url, // 封面图链接（即图片的URL）
				title: item.title,
				nickname: item.user_id[0].nickname,
				avatar_url: item.user_id[0].avatarfile.url, // 用户头像的URL
			}}) */ // 注：上述被注释的代码片段被接触注释后会有语法错误，因为箭头函数返回对象时应该使用箭头函数的简写语法（即“()=>({})”（此处的第二个圆括号的作用是把被返回的对象当作一个整体，使得整个箭头函数只有一行代码。因为此处是简写语法，所以省略了大括号和return关键字。这是箭头函数返回对象时需被使用到的标准语法））或者下面的这段代码中的写法↓
			console.log(data); // Proxy(Array) {0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}}
			return data.map((item) => {
				// const user = item.user_id && item.user_id[0] ? item.user_id[0] : {};
				// console.log(`用户对象结构：${JSON.stringify(user)}`); // 控制台中输出“用户对象结构：{"_id":"68a8284d8a5c782a2b091062","nickname":"abcd88732771"}”					
				// console.log(item.user_id[0]); // 控制台中输出“Proxy(Object) {_id: '68a8284d8a5c782a2b091062', nickname: 'abcd88732771'}”，可以看到这个对象中确实没有“avatar_file”属性		
				// console.log(item.user_id[0].avatar_file); // Proxy(Object) {extname: 'jpg', name: '68a5a52a466d413f7018802f1755686446155', url: 'https://mp-5d9c2cea-49c5-482b-8313-d9f9661aa2b1.cd…loudstorage/3c3e0d44-ac8b-4ff5-9b2d-0d35d8001437.'}				
				// console.log(item.user_id[0].avatarfile); // undefined				
				// console.log(item.avatarfile); // Proxy(Object) {extname: 'jpg', fileType: 'image', image: {…}, name: '9e810e0d3bf944168445707694f09841_720w_944h.jpg', path: 'https://pics0.baidu.com/feed/c9fcc3cec3fdfc0347ccd115b3b90e9ba5c22678.jpeg', …}				
				// console.log(item.avatarfile.url); // 控制台中输出“https://pics0.baidu.com/feed/c9fcc3cec3fdfc0347ccd115b3b90e9ba5c22678.jpeg”				
				return {
					image: item.avatarfile.url, // 封面图链接（即图片的URL）
					title: item.title,
					nickname: item.user_id[0].nickname,
					// avatar_url: item.user_id[0].avatarfile.url, // 用户头像的URL
					avatarurl: item.user_id[0].avatar_file.url,
					_id: item._id,
				}
			})
		},
		// 这是Zulu给出的代码，运行时不报错↓
		/* handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(data) {
			if (!data || !Array.isArray(data)) {
				console.error('无效的数据格式:', data);
				return [];
			}

			return data.map((item) => {
				if (!item) return null;

				const avatarUrl = item.avatarfile?.url ||
					item.avatarfile?.fileID ||
					item.avatarfile?.path ||
					'';

				const userInfo = Array.isArray(item.user_id) && item.user_id.length > 0 ?
					item.user_id[0] :
					null;

				return {
					image: avatarUrl,
					title: item.title || '',
					nickname: userInfo?.nickname || '',
					avatar_url: userInfo?.avatarfile?.url || '',
					_id: item._id || '',
				};
			}).filter(Boolean); // 过滤掉null项
		}, */
		// 这段代码也是Zulu给出的代码，运行时虽然不报前面那个错误，但是会报告说“custom-waterfalls-flow组件接收到了Promise对象而非预期的数组”↓
		/* async handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(data) {
			const completeData = await Promise.all(data.map(async (item) => {
				if (item.user_id?.[0]?.avatar_file) {
					// 已包含完整数据
					return {
						image: item.avatarfile?.url || '',
						title: item.title,
						nickname: item.user_id[0].nickname,
						avatar_url: item.user_id[0].avatar_file.url || '',
						_id: item._id
					}
				}
				// 缺少头像数据时二次查询
				const { result } = await uniCloud.database()
					.collection('uni-id-users')
					.doc(item.user_id[0]._id)
					.field('avatar_file.url')
					.get()

				return {
					image: item.avatarfile?.url || '',
					title: item.title,
					nickname: item.user_id[0].nickname,
					avatar_url: result.data[0]?.avatar_file?.url || '',
					_id: item._id
				}
			}))
			return completeData
		}, */
		// 新增异步数据加载方法
		/* async loadWaterfallData() {
			this.loading = true;
			try {
				// const { result } = await this.$refs.udb.loadData();
				this.waterfallData = this.handlerForChangeTheFormatOfDataListToTheCorrentFormatThatBeNeededByTheComponentThatBeNamedCustomWaterfallsFlow(result.data);
				// 对缺失头像的数据进行补全
				await this.completeAvatarData();
			} finally {
				this.loading = false;
			}
		},
		// 头像数据补全
		async completeAvatarData() {
			const promises = this.waterfallData.map(async (item, index) => {
				if (!item.avatar_url) {
					const { result } = await uniCloud.database()
						.collection('uni-id-users')
						.doc(item._id)
						.field('avatar_file.url')
						.get();

					this.$set(this.waterfallData, index, {
						...item,
						avatar_url: result.data[0]?.avatar_file?.url || ''
					});
				}
			});

			await Promise.all(promises);
		} */
	},
	components: {
		statusBar
	},
}
</script>

<style lang="scss">
@import url("../../static/icon/iconfont.css");
// @import url("../../uni.scss"); // 注：必须在此处引入这个全局样式文件，否则后续代码中的scss变量将无法被使用
page{ // 注：page相当于HTML的body标签，表示整个页面的样式
	background-color: #FFFFFF;
}
.uni-search-box {
	background-color: #FFFFFF;
	/* “position:sticky”属性表示“该元素采用了粘性定位”，这种定位的效果是“该元素在页面中滚动时可以保持其在视口中的位置不变”。这里为了简化布局，不采用这种定位↓ */
	/* position: sticky; */
	height: 50px;
	/* top: 0;
		left: 0; */
	/* #ifndef APP-PLUS */
	z-index: 9;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	width: 580rpx;
	/* #endif */
}

.cover-search-bar {
	height: 50px;
	position: relative;
	top: -50px;
	margin-bottom: -50px;
	/* #ifndef APP-NVUE */
	z-index: 999;
	/* #endif */
}

.banner-image {
	width: 100%;
	height: 400rpx;
	margin-top: 10rpx
}

.swiper-box {
	height: 400rpx;
}

.nav-bar {
	display: flex;
	align-items: center;
}

.aClassForACompentThatBeNamedScrollView {
	width: 100%;
	height: 32px;
	padding: 20rpx;
	/* 不换行显示，让元素排成一行↓ */
	white-space: nowrap;
	line-height: 60rpx;
	color: $uni-text-color;
	font-size: 32rpx;
	overflow: hidden;
}

.scroll-view-item {
	// 注：由于“scroll-view”组件不支持使用弹性盒子布局，因此这里使用了“display: inline-block”来代替↓
	display: inline-block;
	margin-right: 40rpx;
}

.scroll-view-active {
	color: $uni-color-primary;
	font-weight: bold;
	border-bottom: 4rpx solid $uni-color-primary;
}

.navigateToMoreCategory icon-liebiao {
	font-size: 40rpx;
	top: -4rpx;
	right: 4rpx;
}

.waterfall-wrapper {
	margin: 20rpx;
}
.waterfall-title {
	text-align: center;
	font-size: 28rpx;
	color: $uni-text-color;
	margin: 20rpx 0;
}
.user-wrapper {
	display: flex;
	align-items: center;
	font-size:26rpx;
	color: $uni-text-color;
	margin:10px;
}
.avatarOfUser{
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
</style>
